<template>
	<el-form ref="formRef" :model="formData" :rules="formRules" label-width="6em">
		<el-row type="flex" :gutter="10">
			<el-col :span="24">
				<el-form-item label="封面图" prop="img">
					<el-upload-image v-model="formData.img"></el-upload-image>
				</el-form-item>
			</el-col>
			<el-col :span="24">
				<el-form-item label="文章标题" prop="title">
					<el-input v-model="formData.title" placeholder="请输入文章标题" type="textarea" clearable rows="3"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="文章分类" prop="cate_id">
					<el-select v-model="formData.cate_id" filterable placeholder="请选择文章分类">
						<el-option v-for="(item, index) in articleTypeData" :key="index" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="阅读量" prop="hits">
					<el-input disabled v-model="formData.hits" placeholder="阅读量" type="text" clearable></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="排序" prop="sort">
					<el-input v-model="formData.sort" placeholder="请输入排序" type="text" clearable></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="启用状态" prop="status">
					<el-switch v-model="formData.status" :active-value="1" :inactive-value="0"></el-switch>
				</el-form-item>
			</el-col>
			<el-col :span="24">
				<el-form-item prop="content" label="内容">
					<div>
						<!-- <Toolbar style="border-bottom: 1px solid #ccc,width:375px" :editor="editor"
                            :defaultConfig="toolbarConfig" :mode="mode" /> -->
						<Editor height="700px" style="width: 375px" v-model="formData.content" :defaultConfig="editorConfig" :mode="mode" @onCreated="onCreated" />
					</div>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row type="flex" justify="center">
			<el-button type="primary" icon="el-icon-check" @click="onConfirm">完成({{ current + 1 }}/{{ selection.length }})</el-button>
			<el-button type="default" icon="el-icon-close" @click="$parent.$emit('update:visible', false)">取消</el-button>
		</el-row>
	</el-form>
</template>

<script>
import { post, get } from "@/assets/js/http.js"
// import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import Editor from "@/components/editor.vue"

export default {
	name: "article-edit",
	props: {
		articleTypeData: {
			type: Array,
			default: () => [],
		},
		selection: {
			type: Array,
			default: () => [],
		},
	},
	watch: {
		selection() {
			this.setFormData()
		},
	},
	mounted() {
		this.setFormData()
	},
	components: {
		"el-upload-image": () => import("@/components/el-upload-image.vue"),
		Editor,
		// Toolbar
	},
	data() {
		return {
			current: 0,
			editor: null,
			toolbarConfig: {},
			editorConfig: {
				MENU_CONF: {
					uploadImage: {
						fieldName: "file",
						server: "/admin/ajax/upload",
						headers: {
							batoken: this.$store.state.token,
						},
						/* eslint-disable-next-line */
						customInsert(res, insertFn) {
							insertFn($store.getters.baseUrl + res.data.file.url)
						},
					},
				},
				uploadVideo: {
					fieldName: "file",
					server: "/admin/ajax/upload",
					headers: {
						batoken: this.$store.state.token,
					},
					/* eslint-disable-next-line */
					customInsert(res, insertFn) {
						insertFn($store.getters.baseUrl + res.data.file.url)
					},
				},
			},
			mode: "default",
			formData: {
				title: "",
				cate_id: "",
				img: [],
				hits: "",
				content: "",
				sort: "",
				status: 1,
			},
			formRules: {
				title: [
					{
						required: true,
						message: "此项为必填项",
					},
				],
				cate_id: {
					required: true,
					message: "此项为必填项",
				},
				img: {
					required: true,
					message: "此项为必填项",
				},
				// hits: {
				//     required: true,
				//     message: "此项为必填项"
				// },
				content: {
					required: true,
					message: "此项为必填项",
				},
				sort: [
					{
						required: true,
						message: "此项为必填项",
					},
					{
						pattern: /^[1-9]\d*$/,
						message: "只能输入正整数",
					},
				],
				status: {
					required: true,
					message: "此项为必填项",
				},
			},
		}
	},
	methods: {
		async setFormData() {
			if (this.selection.length > 0) {
				const data = this.selection[this.current]
				const result = await get({
					url: "/admin/wiki.news/edit",
					params: {
						id: data.id,
					},
				})
				const row = result.row
				this.formData.id = row.id
				this.formData.title = row.title
				this.formData.cate_id = row.cate_id
				this.formData.img = [{ url: row.img }]
				this.formData.hits = row.hits
				this.formData.content = row.content
				this.formData.sort = row.sort
				this.formData.status = row.status
			}
		},
		onCreated(editor) {
			this.editor = Object.seal(editor)
			this.editor.setHtml(this.formData.content)
		},
		onConfirm() {
			this.$refs.formRef.validate(async (isValid) => {
				if (isValid) {
					const formData = JSON.parse(JSON.stringify(this.formData))
					if (formData.img.length > 0) {
						if (formData.img[0].response) {
							formData.img = this.$store.getters.baseUrl + formData.img[0].response.data.file.url
						} else {
							formData.img = formData.img[0].url
						}
					} else {
						formData.img = ""
					}
					if (formData.content) {
						await post({
							url: "/admin/wiki.news/edit",
							data: formData,
							loading: true,
							successTip: true,
						})
						if (this.current === this.selection.length - 1) {
							this.$emit("update")
							this.current = 0
							this.$parent.$emit("update:visible", false)
							this.$refs.formRef.resetFields()
						} else {
							this.current += 1
							this.setFormData()
						}
					} else {
						this.$message.error("文章内容不能为空")
					}
				}
			})
		},
		onCancel() {
			if (this.current > 0) {
				this.$emit("update")
			}
			this.current = 0
			this.$parent.$emit("update:visible", false)
			this.$refs.formRef.resetFields()
		},
	},
	beforeDestroy() {
		const editor = this.editor
		if (editor == null) return
		editor.destroy()
	},
}
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
